<template>
  <div>
    <el-row>
      <el-col >
        <el-button size="mini" @click="add">添加</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="tableData"

        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="菜单ID"
          width="100">
      </el-table-column>
      <el-table-column
          prop="name"
          label="菜单名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="path"
          label="菜单地址">
      </el-table-column>
      <el-table-column
          prop="component"
          label="组件">
      </el-table-column>
      <el-table-column
          prop="parentid"
          label="父组件ID">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <!--编辑菜单对话框-->
      <el-dialog :visible.sync="openDialog" title="菜单/添加/编辑" width="40%">
        <el-form :model="form">
          <el-form-item label="菜单名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="菜单地址">
            <el-input v-model="form.path"></el-input>
          </el-form-item>

          <el-form-item label="对应组件">
            <el-input v-model="form.component"></el-input>
          </el-form-item>
          <el-form-item label="父菜单ID">
            <el-input v-model="form.parentid"></el-input>
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="form.enabled"></el-switch>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="openDialog = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  name: "MenuView",
  data() {
    return {
      tableData: [],
      form: {

        name: '',
        path: '',
        component: '',
        parentid: '',
        enabled:true
      },
      openDialog: false
    }
  }, methods: {
    list() {
      this.axios.get(this.$baseUrl + 'menu/getList').then(res => {
        this.tableData = res.data.data;
      })
    }, openEdit(row) {
      this.openDialog = true;
      this.form = row
    }, save() {
      this.axios.post(this.$baseUrl+'menu/saveOrUpdate',this.form).then(res=>{
        this.form={};
       this.$message(res.data.msg);
       this.openDialog=false;
       this.list();
      })
    },add(){
         this.openDialog=true;
    },del(id){

      this.axios.get(this.$baseUrl+'menu/del',{params:{id:id}}).then(res=>{
        this.$message(res.data.msg);
        this.list();
      })
    }


  }
  , created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
